<template>
  <div class="userOperation">
    <div class="box">
      <div class="header">
        <span>操作</span>
      </div>
      <div class="lists" @click="detailOperation">
        <div
          class="list"
          v-for="item in operations"
          :key="item.id"
          :title="item.title"
        >
          <img :src="item.icon" :title="item.title" alt="" />
          <span :title="item.title">{{ item.title }}</span>
        </div>
      </div>
    </div>
    <el-dialog title="添加子系统" :visible.sync="addParamsFormVisible">
      <el-form :model="addParams">
        <el-form-item label="子系统名称" :label-width="formLabelWidth">
          <el-input v-model="addParams.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="子系统标题" :label-width="formLabelWidth">
          <el-input v-model="addParams.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="子系统路径" :label-width="formLabelWidth">
          <el-input v-model="addParams.pathname" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addParamsFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    system: {
      default: {},
    },
  },
  data() {
    return {
      operations: [
        {
          id: 1,
          icon: require("../assets/images/subsystem/add.png"),
          title: "添加子系统",
          operate: "add",
        },
        {
          id: 2,
          icon: require("../assets/images/subsystem/delete.png"),
          title: "删除子系统",
          operate: "delete",
        },
        {
          id: 3,
          icon: require("../assets/images/subsystem/edit.png"),
          title: "更新子系统",
          operate: "edit",
        },
      ],
      addParams: {
        title: "",
        name: "",
        pathname: "",
      },
      addParamsFormVisible: false,
      formLabelWidth: "120px",
      isDelete: false,
      isEdit: false,
    };
  },
  components: {},
  created() {},
  watch: {},
  methods: {
    detailOperation(event) {
      // console.log(event.target.getAttribute('title'))
      const title = event.target.getAttribute("title");
      if (title == "添加子系统") {
        // 关闭其他两个状态
        this.isDelete = false;
        this.$emit("showDeleteIcon", this.isDelete);

        this.isEdit = false;
        this.$emit("showEditIcon", this.isEdit);

        this.addParamsFormVisible = true;
      } else if (title == "删除子系统") {
        // 关闭其他两个状态
        this.addParamsFormVisible = false;

        this.isEdit = false;
        this.$emit("showEditIcon", this.isEdit);

        this.isDelete = !this.isDelete;
        this.$emit("showDeleteIcon", this.isDelete);
      } else if (title == "更新子系统") {
        // 关闭其他两个编辑状态
        this.addParamsFormVisible = false;
        this.isDelete = false;
        this.$emit("showDeleteIcon", this.isDelete);

        this.isEdit = !this.isEdit;
        this.$emit("showEditIcon", this.isEdit);
      }
    },
    add() {
      this.addParamsFormVisible = false;

      this.addSubmit();
    },
    addSubmit() {
      let ts = this;
      ts.$http({
        method: "POST",
        url: `/public/homepage/${ts.system.homePagePath}/addsystempage`,
        data: {
          systemPageName: ts.addParams.name,
          systemPageTitle: ts.addParams.title,
          systemPagePath: ts.addParams.pathname,
        },
      })
        .then((response) => {
          console.log("add subsystem", response);
          if (response.data.code == 200) {
            ts.$message({
              showClose: true,
              message: "添加子系统成功,正在更新页面...",
              type: "success",
            });
            // 获取子系统列表
            this.$emit("renewSubsystem");
            // 清空输入框
            this.emptyaddDialog();
          } else {
            ts.$message({
              showClose: true,
              message: response.data.message,
              type: "error",
            });
          }
        })
        .catch((error) => {
          ts.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    emptyaddDialog() {
      this.addParams.title = "";
      this.addParams.name = "";
      this.addParams.pathname = "";
    },
  },
};
</script>
<style lang="less" scoped>
.userOperation {
  position: absolute;
  right: 0;
  top: 0;
  color: #ffffff;
  font-size: 0.3rem;
  cursor: pointer;
  .box {
    background-color: #13227a;
    border-radius: 10px;
    box-shadow: 4px 4px 4px #000;
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px;
    }
    .lists {
      .list {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 12px;
      }
    }
  }
}
img {
  width: 0.4rem;
  margin-right: 6px;
}
@media screen and (max-width: 1200px) {
  .userOperation {
    font-size: 0.65rem;
  }
}
@media screen and (max-width: 1280px) {
  img {
    width: 1rem;
  }
}
@media screen and (min-width: 3840px) {
  .userOperation {
    font-size: 1rem;
  }
}
</style>